<template>
  <div class="promptMessage">
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      center
      :before-close="handleClose">
      <template slot="title" class="dialog-title">
        <h3 v-html="title"></h3>
      </template>
      <div class="dialog-body">
        <!-- 给流程留言 -->
        <p v-if="isProcessLeaveWord">
          &emsp;&emsp;感谢您的宝贵意见，留言已发送至您的专属顾问：<span class='color_green'>{{ number }}</span>号的邮箱：
          <span class='color_green'> {{ email }} </span>。专属顾问会在24小时内与您联系，请您耐心等待。
          如果您有其他疑问，也可主动联系<span class='color_green'>{{ number }}</span>号专属顾问，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ phone }}</span>
        </p>
        <!-- 给代理人留言 -->
        <p v-if="isAgentLeaveWprd">
          &emsp;&emsp;感谢您的宝贵意见，留言已发送至代理人：<span class='color_green'>{{ number }}</span>号的邮箱：
          <span class='color_green'> {{ email }} </span>。请您耐心等待。
          如果您有其他疑问，也可主动联系您的代理人：<span class='color_green'>{{ number }}</span>号，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ phone }}</span>
        </p>
        <!-- 给流程催单 -->
        <p v-if="isProcessUrging">
          <!-- &emsp;&emsp;邮件已发送至您的专属顾问：<span class='color_green'>{{ number }}</span>号的邮箱：
          <span class='color_green'> {{ email }} </span>，专属顾问会在24小时内与您联系，我们会尽快为您处理该订单,请您耐心等待。
          如果您有其他疑问，也可主动联系您的专属顾问：<span class='color_green'>{{ number }}</span>号，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ phone }}</span>，<span style='color:rgb(73, 150, 124)'>3</span>天之后您可以再次催单！ -->
          &emsp;&emsp;让您久等了，对此我们感到非常抱歉，同时非常感谢您的耐心等待，您的催单信息已经发送到专属顾问邮箱，
          专属顾问：<span class='color_green'>{{ number }}</span>号，邮箱：<span class='color_green'> {{ email }} </span>，
          联系电话：<span style='color:rgb(73, 150, 124)'>{{ phone }}</span>，<span style='color:rgb(73, 150, 124)'>3</span>天之后您可以再次催单！
          非常感谢您对我们工作的支持，您的订单信息我们会全程跟踪，如果给您带来了不便，还请谅解，谢谢！
        </p>
        <!-- 给代理人催单 -->
        <p v-if="isAgentUrging">
          <!-- &emsp;&emsp;邮件已发送至您的代理人：<span class='color_green'>{{ number }}</span>号的邮箱：
          <span class='color_green'> {{ email }} </span>，我们会尽快为您处理该订单,请您耐心等待。
          如果您有其他疑问，也可主动联系代理人：<span class='color_green'>{{ number }}</span>号，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ phone }}</span>，<span style='color:rgb(73, 150, 124)'>3</span>天之后您可以再次催单！ -->
          &emsp;&emsp;让您久等了，对此我们感到非常抱歉，同时非常感谢您的耐心等待，您的催单信息已经发送到代理人邮箱，
          代理人：<span class='color_green'>{{ number }}</span>号，邮箱：<span class='color_green'> {{ email }} </span>，
          联系电话：<span style='color:rgb(73, 150, 124)'>{{ phone }}</span>，<span style='color:rgb(73, 150, 124)'>3</span>天之后您可以再次催单！
          非常感谢您对我们工作的支持，您的订单信息我们会全程跟踪，如果给您带来了不便，还请谅解，谢谢！
        </p>
        <!-- 定稿文件确认 -->
        <p v-if="isConfirmFishFile">
          &emsp;&emsp;我们会尽快为您制作定稿文件。如果您对该案件有其他疑问，也可主动联系代理人：<span class='color_green'>{{ agentNumber }}</span>号,
          联系电话：<span class='color_green'> {{ agentPhone }} </span>，或联系专属顾问：<span class='color_green'>{{ processNumber }}</span>号，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ processPhone }}</span>
        </p>
        <!-- 定稿文件退回 -->
        <p v-if="isConfirmFishFileForNo">
          &emsp;&emsp;你的意见已经反馈至代理人：<span class='color_green'>{{ agentNumber }}</span>号,代理人将根据您的意见修改案件，感谢您提出的修改意见。如果您对该案件有其他疑问，
         也可主动联系代理人：<span class='color_green'>{{ agentNumber }}号</span>，联系电话：<span class='color_green'>{{ agentPhone }}</span>，或联系专属顾问：<span class='color_green'>{{ processNumber }}</span>号，
          联系电话: <span style='color:rgb(73, 150, 124)'>{{ processPhone }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->

        <el-button type="primary" @click="agentRate" v-no-more-click:3000 v-if="isConfirmFishFile">案件评分</el-button>
        <el-button @click="agentRate(false)" v-no-more-click:3000 v-if="isConfirmFishFile">以后再说</el-button>

        <el-button type="primary" @click="dialogVisible = false" v-no-more-click:3000 v-else>确 定</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false" v-no-more-click:3000>稍后评价</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      title: '',
      number: '',
      agentNumber: '',
      processNumber: '',
      email: '',
      phone: '',
      agentPhone: '',
      processPhone:'',
      isProcessLeaveWord: false,
      isAgentLeaveWprd: false,
      isProcessUrging: false,
      isAgentUrging: false,
      isConfirmFishFile: false,
      isConfirmFishFileForNo: false,
      order_id: null
    }
  },
  methods: {
    agentRate(type = true) {
      this.dialogVisible = false
      if (type) {
        let order = {
          id : this.order_id
        }
        this.$emit('agentRate', order)
      } else {
        this.$confirm('若您不想此时对案件进行评分，可稍后在对应订单的查看详情页面中点击<span class="finish">案件评分</span>按钮对案件进行评分', '提示', {
          cancelButtonText: '我已知晓',
          confirmButtonText: '立即评分',
          dangerouslyUseHTMLString: true,
        }).then(() => {
          let order = {
            id : this.order_id
          }
          this.$emit('agentRate', order)
        }).catch(
        )
      }
    },
    showDialog (from, data) {
      // title
      this.isProcessLeaveWord = false,
      this.isAgentLeaveWprd = false,
      this.isProcessUrging = false,
      this.isAgentUrging = false,
      this.isConfirmFishFile = false,
      this.isConfirmFishFileForNo = false
      this.order_id = data.order_id
      // console.log(data)
      var titleHtml = ''
      if (data.userName) {
        titleHtml = `<h3>尊敬的<span class='color_green'>${data.userName}</span>:</h3>`
      } else {
        titleHtml = `<h3>尊敬的用户:</h3>`
      }
      // 流程人员留言
      if (from == 'processLeaveWord') {
        this.title = titleHtml
        this.number = data.number
        this.email = data.email
        this.phone = data.phone
        this.isProcessLeaveWord = true
        this.dialogVisible = true
      }
      // 代理人留言
      if (from == 'agentLeaveWord') {
        this.title = titleHtml
        this.number = data.number
        this.email = data.email
        this.phone = data.phone
        this.isAgentLeaveWprd = true
        this.dialogVisible = true
      }
      // 给流程催单
      if (from == 'processUrging') {
        this.title = titleHtml
        this.number = data.number
        this.email = data.email
        this.phone = data.phone
        this.isProcessUrging = true
        this.dialogVisible = true
      }
      // 给代理人催单
      if (from == 'agentUrging') {
        this.title = titleHtml
        console.log(titleHtml)
        this.number = data.number
        this.email = data.email
        this.phone = data.phone
        this.isAgentUrging = true
        this.dialogVisible = true
      }
      // 定稿文件确认
      if (from == 'confirmFishFile') {
        this.title = '<h3>感谢您的配合！</h3>'
        this.agentNumber = data.agentNumber
        this.processNumber = data.processNumber
        this.agentPhone = data.agentPhone
        this.processPhone = data.processPhone
        this.isConfirmFishFile = true
        this.dialogVisible = true
        this.$emit('getData')
        setTimeout(() => {
          this.$store.commit('setLookOrder', false)
        }, 500)
      }
      // 定稿文件退回
      if (from == 'confirmFishFileForNo') {
        this.title = '<h3>感谢您的配合！</h3>'
        this.agentNumber = data.agentNumber
        this.processNumber = data.processNumber
        this.agentPhone = data.agentPhone
        this.processPhone = data.processPhone
        this.isConfirmFishFileForNo = true
        this.dialogVisible = true
        this.$emit('getData')
        setTimeout(() => {
          this.$store.commit('setLookOrder', false)
        }, 500)
      }
    },
    handleClose () {
      this.dialogVisible = false
      this.isProcessLeaveWord = false,
      this.isAgentLeaveWprd = false,
      this.isProcessUrging = false,
      this.isAgentUrging = false,
      this.isConfirmFishFile = false,
      this.isConfirmFishFileForNo = false
    }
  }
}
</script>

<style lang='less'>
  .promptMessage {
    .color_green {
      color: rgb(73, 150, 124)
    }
    .el-dialog__body {
      padding: 10px;
    }
    .el-dialog__footer {
      padding: 10px;
    }
  }
</style>
